<template>
	<view class="container">
		<nav-bars bgColor="transparent" fontColor="#fff">更换主体</nav-bars>
		<view class="topBg">
			<image :src="`${baseimg}/static/superHK/topBg.png`" mode=""></image>
		</view>
		<view class="formBox" v-if="detailData.length == 0">
			<view class="headImg">
				<image :src="userInfo.headimg" mode=""></image>
				<view>{{userInfo.username}}</view>
			</view>
			<view class="formLab">
				<view class="name">
					联系人
				</view>
				<input type="text" v-model="form.name" :placeholder="form.name">
				<view class="name">
					手机号
				</view>
				<input type="text" v-model="form.mobile" :placeholder="form.mobile">
				<view class="name">
					入驻主体
				</view>
				<input type="text" placeholder="个体" disabled>
				<view class="name">
					入驻卖场
				</view>
				<input type="text" :placeholder="form.market_id == 1? '联坤家居' : '柳州卖场'" disabled>
				<view class="name">
					身份证
				</view>
				<view class="a_cGroup">
					<view>
						<view class="a_cuImage" @tap="uploadImage('id_no_front')">
							<image v-if="form.id_no_front == ''" src="https://manager.ryz1620.com/static/adminShop/id_no_front.png"></image>
							<view v-if="form.id_no_front"><image :src="form.id_no_front"></image></view>
							<image src="https://manager.ryz1620.com/static/enter/icon_play.png" class="photoImage"></image>
						</view>
						<view class="a_cuTxt">正面</view>
					</view>
					<view>
						<view class="a_cuImage" @tap="uploadImage('id_no_back')">
							<image v-if="form.id_no_back == ''" src="https://manager.ryz1620.com/static/adminShop/id_no_back.png"></image>
							<view v-if="form.id_no_back"><image :src="form.id_no_back"></image></view>
							<image src="https://manager.ryz1620.com/static/enter/icon_play.png" class="photoImage"></image>
						</view>
						<view class="a_cuTxt">反面</view>
					</view>
				</view>
				<view class="name">
					入驻协议
				</view>
				<view class="a_cGroup">
					<!-- <view class="a_cuImage" @tap="uploadImage('settle_agreement')">
						<image v-if="form.settle_agreement == ''" src="https://manager.ryz1620.com/static/adminShop/settle_agreement.png"></image>
						<view v-if="form.settle_agreement"><image :src="form.settle_agreement"></image></view>
						<image src="https://manager.ryz1620.com/static/enter/icon_play.png" class="photoImage"></image>
					</view> -->
					<u-upload ref="uUpload" :action="action" :auto-upload="true" max-count="3" style="margin-top: 20rpx;"></u-upload>
				</view>
				<view class="submit" @click="submitfunc">提交</view>
			</view>
		</view>
		
		<view class="formBox" v-else>
			<view class="headImg">
				<image :src="userInfo.headimg" mode=""></image>
				<view>{{userInfo.username}}</view>
			</view>
			<view class="formLab">
				<view class="name">
					联系人
				</view>
				<input type="text" v-model="editform.name" :placeholder="detailData.name">
				<view class="name">
					手机号
				</view>
				<input type="text" v-model="editform.mobile" :placeholder="detailData.mobile">
				<view class="name">
					入驻主体
				</view>
				<input type="text" placeholder="个体" disabled>
				<view class="name">
					入驻卖场
				</view>
				<input type="text" :placeholder="detailData.market_id == 1? '联坤家居' : '柳州卖场'" disabled>
				<view class="name">
					身份证
				</view>
				<view class="a_cGroup">
					<view>
						<view class="a_cuImage" @tap="uploadImage('id_no_front','id_no_front')">
							<view v-if="editform.id_no_front == ''"><image :src="detailData.id_no_front.path"></image></view>
							<view v-else><image :src="editform.id_no_front"></image></view>
							<image src="https://manager.ryz1620.com/static/enter/icon_play.png" class="photoImage"></image>
						</view>
						<view class="a_cuTxt">正面</view>
					</view>
					<view>
						<view class="a_cuImage" @tap="uploadImage('id_no_back','id_no_back')">
							<view v-if="editform.id_no_back == ''"><image :src="detailData.id_no_front.path"></image></view>
							<view v-else><image :src="editform.id_no_back"></image></view>
							<image src="https://manager.ryz1620.com/static/enter/icon_play.png" class="photoImage"></image>
						</view>
						<view class="a_cuTxt">反面</view>
					</view>
				</view>
				<view class="name">
					入驻协议
				</view>
				<view class="a_cGroup">
					<u-upload :action="action" :file-list="fileList" ref="uUploadEdit" max-count="3"  @on-remove="onRemove"></u-upload>
				</view>
				<view class="submit" @click="submitEdit">修改提交</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import service_distri from '@/service/distri.js'
	import service_constr from '@/service/constr.js'
	import URL from '@/config/url.js'
	export default {
		data() {
			return {
				fileList: [],
				settle_agreement_Arr: [],
				settle_agreement_Ids: [],
				detailData: {},//账号转换详情
				action: URL.ENTER_UPLOAD_IMAGE,
				filesArr: [],
				baseimg: this.$static,
				userInfo:{},//用户个人信息
				// 申请信息
				form: {
					market_id: uni.getStorageSync('marketId'),
					user_id: this.$store.state.index.userId,
					name: '',
					mobile: this.$store.state.index.userMobile,
					settle_subject: '',//3	入驻主体(2企业,3个体)
					id_no_front: '',
					id_no_front_id: '',
					id_no_back: '',
					id_no_back_id: '',
					settle_agreement: '',
					settle_agreement_id: '',
					partner_id: this.$store.state.index.sid,
					partner_type: this.$store.state.index.role,
				},
				editform: {
					apply_id:'',
					market_id: '',
					user_id: '',
					name: '',
					mobile: '',
					settle_subject: '',//3	入驻主体(2企业,3个体)
					id_no_front: '',
					id_no_front_id: '',
					id_no_back: '',
					id_no_back_id: '',
					settle_agreement: '',
					settle_agreement_id: '',
					partner_id: '',
					partner_type: '',
				},
			}
		},
		onLoad(options) {
			const that = this;
			that.form['name'] = options.link_name
			that.getUserInfo();
			that.getDetailAccount()
		},
		methods:{
			onRemove(index, lists) {
				this.settle_agreement_Ids.splice(index,1);
			},
			// 账户转换详情
			getDetailAccount(){
				let user_id = this.$store.state.index.userId
				let params = {
					user_id:user_id
				}
				service_constr.getDetailAccount(params)
					.then(res => {
						// console.log(res,'账户转换详情')
						if (res.code == 1) {
							this.detailData = res.data;
							if(res.data && res.data.settle_agreement){
								this.settle_agreement_Arr = res.data.settle_agreement
								for(let i=0;i<this.settle_agreement_Arr.length;i++){
									this.settle_agreement_Ids.push(this.settle_agreement_Arr[i].id)
								}
								res.data.settle_agreement.map(item=>{
								  this.fileList.push({
								    url:item.path,
									id:item.id
								  })
								})
							}
						}
						else {
							this.$utils.hideLoading()
							this.$utils.showErr({ title: res.msg })
						}
					})
			},
			// 上传图片 
			uploadImage(type,type2) {
				// 选择图片
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						this.$utils.showLoading({ title: '上传中...' })
						// 上传图片
						uni.uploadFile({
							url: URL.ENTER_UPLOAD_IMAGE,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (res) => {
								this.$utils.hideLoading()
								if (res.data) {
									let request = JSON.parse(res.data)
									if (request.code == 1) {
										// 上传成功提示
										uni.showToast({ title: '上传成功', icon: 'none' })
										console.log(request.data)
										// 上传的图片
										if(type2){
											this.editform[type] = request.data.url
											this.editform[type + '_id'] = request.data.id
										}else{
											this.form[type] = request.data.url
											this.form[type + '_id'] = request.data.id
										}
										
										// console.log(this.form)
									}
									else {
										this.$utils.showErr({ title: request.msg })
									}
								}
								else {
									this.$utils.showErr()
								}
							},
							fail: (err) => {
								this.$utils.hideLoading()
								this.$utils.showErr()
							}
						})
					}
				})
			},
			getUserInfo(){
				let user_id = this.$store.state.index.userId
				service_distri.get_DistriInfo({user_id}).then(res=>{
					// console.log(res,'用户个人信息')
					if(res.code==1){
						this.userInfo = res.data?res.data:{}
					}
				})
			},
			submitfunc(){
				let form = this.form
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				let arr = [];
				for(let i=0; i<files.length;i++){
					arr.push(files[i].response.data.id)
				}
				form['settle_agreement_id'] = arr.toString()
				
				if (this.verifyData()) { // 验证数据
					let form = this.form
					let params = {
						market_id: form.market_id,
						user_id: form.user_id,
						name: form.name,
						mobile: form.mobile,
						settle_subject: 3,//	入驻主体(2企业,3个体)
						id_no_front: form.id_no_front_id,
						id_no_back: form.id_no_back_id,
						settle_agreement: form.settle_agreement_id,
						partner_id: form.partner_id,
						partner_type: form.partner_type,
					}
					
					this.$utils.showLoading({ title: '提交中...' })
					service_constr.changeApply(params)
						.then(res => {
							if (res.code == 1) {
								console.log(res,'提交成功')
								uni.redirectTo({ url: '/pagesFour/home/changeBody/success' })
							}
							else {
								this.$utils.hideLoading()
								this.$utils.showErr({ title: res.msg })
							}
						})
						.catch(err => {
							this.$utils.hideLoading()
							this.$utils.showErr()
						})
				}
			},
			submitEdit(){
				let files = [];
				let editform = this.editform
				files = this.$refs.uUploadEdit;
				for(let i=0;i<files.lists.length;i++){
					if(files.lists[i].response && files.lists[i].response.data){
						this.settle_agreement_Ids.push(files.lists[i].response.data.id)
					}
				}
				for (var i = 0; i < this.settle_agreement_Ids.length; i++) {
					if (this.settle_agreement_Ids.indexOf(this.settle_agreement_Ids[i]) != i) {
						this.settle_agreement_Ids.splice(i,1);
						i--;
					}
				}
				if (this.editverifyData()) { // 验证数据
					let params = {
						apply_id: this.detailData.id,
						market_id: this.detailData.market_id,
						user_id: this.detailData.user_id,
						name: editform.name? editform.name : this.detailData.name,
						mobile: editform.mobile? editform.mobile : this.detailData.mobile,
						settle_subject: 3,//	入驻主体(2企业,3个体)
						id_no_front: editform.id_no_front_id? editform.id_no_front_id : this.detailData.id_no_front.id,
						id_no_back: editform.id_no_back_id? editform.id_no_back_id : this.detailData.id_no_back.id,
						settle_agreement: this.settle_agreement_Ids.toString(),
						partner_id: this.detailData.partner_id,
						partner_type: this.detailData.partner_type,
					}
					console.log(params)
					this.$utils.showLoading({ title: '提交中...' })
					service_constr.changeApplyEdit(params)
						.then(res => {
							if (res.code == 1) {
								uni.redirectTo({ url: '/pagesFour/home/changeBody/success' })
							}
							else {
								this.$utils.hideLoading()
								this.$utils.showErr({ title: res.msg })
							}
						})
						.catch(err => {
							this.$utils.hideLoading()
							this.$utils.showErr()
						})
				}
			},
			// 验证数据
			verifyData() {		
				let form = this.form
					let userName = form.name   // 用户名称
			
					// 验证数据
					// 不用验证的数据：userPhone手机号码-首页通过授权获取
					if (!userName) { this.$utils.showErr({ title: '请输入联系人' }); return }
					if (userName.length > 10) { this.$utils.showErr({ title: '用户姓名不能超过10个字符' }); return }
					let phonenum = /^1[23456789]\d{9}$/.test(form.mobile);
					if(!form.mobile){
						uni.showToast({ title: '请输入手机号', icon: 'none' });
						return
					}
					if(!phonenum){
						uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
						return
					}
					let imageIdCardZ = form.id_no_front
					let imageIdCardF = form.id_no_back
					let imageBusiness = form.settle_agreement_id
									
					// 验证数据
					if (!imageIdCardZ) { this.$utils.showErr({ title: '请上传身份证正面' }); return }
					if (!imageIdCardF) { this.$utils.showErr({ title: '请上传身份证反面' }); return }
					if (!imageBusiness) { this.$utils.showErr({ title: '请上传入驻协议' }); return }
			
				// 验证通过
				return true
			},
			editverifyData() {
				let editform = this.editform
					let userName = editform.name? editform.name : this.detailData.name  // 用户名称
					let mobile = editform.mobile? editform.mobile : this.detailData.mobile  // 手机号
			
					// 验证数据
					// 不用验证的数据：userPhone手机号码-首页通过授权获取
					if (!userName) { this.$utils.showErr({ title: '请输入联系人' }); return }
					if (userName.length > 10) { this.$utils.showErr({ title: '用户姓名不能超过10个字符' }); return }
					let phonenum = /^1[23456789]\d{9}$/.test(mobile);
					if(!mobile){
						uni.showToast({ title: '请输入手机号', icon: 'none' });
						return
					}
					if(!phonenum){
						uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
						return
					}
					let imageIdCardZ = editform.id_no_front? editform.id_no_front : this.detailData.id_no_front.path
					let imageIdCardF = editform.id_no_back? editform.id_no_back : this.detailData.id_no_back.path
					let imageBusiness = editform.settle_agreement_id? editform.settle_agreement_id : this.settle_agreement_Ids.toString()
									
					// 验证数据
					if (!imageIdCardZ) { this.$utils.showErr({ title: '请上传身份证正面' }); return }
					if (!imageIdCardF) { this.$utils.showErr({ title: '请上传身份证反面' }); return }
					if (!imageBusiness) { this.$utils.showErr({ title: '请上传入驻协议' }); return }
			
				// 验证通过
				return true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.topBg {
			width: 100%;
			height: 540rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.formBox{
			margin-top: 70rpx;
			.headImg {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				image {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					margin-left: 32rpx;
				}
				view{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 0px;
					color: #FFFFFF;
					margin-left: 20rpx;
				}
			}
			.formLab{
				background: #FFFFFF;
				border-radius: 36rpx 36rpx 0px 0px;
				padding: 92rpx 32rpx;
				.submit{
					width: 500rpx;
					margin: 0 auto;
					text-align: center;
					background: #E7AD14;
					border-radius: 46px;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					padding: 24rpx 0;
					margin-top: 140rpx;
				}
				.name{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #252525;
				}
				input{
					width: 686rpx;
					height: 92rpx;
					padding: 0 28rpx;
					background: #F1F1F1;
					border-radius: 12px;
					margin-top: 20rpx;
					color: #464646;
					font-size: 26rpx;
					font-weight: 500;
					font-family: PingFang SC;
					margin-bottom: 60rpx;
				}
				.a_cGroup{
					display: flex;
					justify-content: space-between;
					text-align: center;
					.a_cuTxt{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #717171;
						margin-top: 16rpx;
						margin-bottom: 60rpx;
					}
					.a_cuImage{
						position: relative;
						image{
							width: 320rpx;
							height: 210rpx;
							margin-top: 20rpx;
						}
						.photoImage{
							width: 80rpx;
							height: 80rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							margin-left: -40rpx;
							margin-top: -40rpx;
						}
					}
					
				}
			}
			
		}
		.title-input{
			height: 96rpx;
			background: #F5F5F5;
			border-radius: 8rpx;
			margin-bottom: 60rpx;
		}
	}
</style>
